<template>
  <div class="accountEdit">
    <el-dialog
      title="添加/修改账号"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="editCancel"
    >
      <div class="dialog-body">
        <ul class="body-operation">
          <li>
            <span class="span1">姓名:</span>
            <span class="span2">
              <el-input v-model="editInfo.nickname" placeholder="请输入姓名"></el-input>
            </span>
          </li>
          <li>
            <span class="span1">用户名:</span>
            <span class="span2">
              <el-input v-if="flag == 1" v-model="editInfo.loginName" placeholder="请设置用户名"></el-input>
              <el-input v-if="flag == 2" disabled v-model="editInfo.loginName" placeholder="请设置用户名"></el-input>
            </span>
          </li>
          <li v-if="flag == 1">
            <span class="span1">密码:</span>
            <span class="span2">
              <el-input
                v-model="editInfo.password"
                type="password"
                placeholder="请设置密码"
                maxlength="20"
              ></el-input>
            </span>
          </li>
          <li>
            <span class="span1">部门:</span>
            <span class="span2">
              <el-input v-model="editInfo.department" placeholder="请输入部门" value="number"></el-input>
            </span>
          </li>
          <li>
            <span class="span1">权限角色:</span>
            <span class="span2">
              <el-select v-model="editInfo.roleId" placeholder="请选择角色">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </span>
          </li>
          <li>
            <span class="span1">状态:</span>
            <span class="span2">
              <el-select v-model="editInfo.isValid" placeholder="请选择状态">
                <el-option
                  v-for="item in isValidOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </span>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCancel">取 消</el-button>
        <el-button type="primary" @click="editSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import md5 from "md5"
export default {
  props: ["message", "flag"],
  data() {
    return {
      editInfo: {
        id: null,
        loginName: "",
        nickname: "",
        department: "",
        password: "",
        roleId: "",
        isValid: ""
      },
      roleOptions: [],
      isValidOptions: [
        {
          value: "1",
          label: "启用"
        },
        {
          value: "0",
          label: "禁用"
        }
      ],
      dialogVisible: true
    };
  },
  methods: {
    editCancel() {
      let that = this;
      that.editInfo = {
        id: null,
        loginName: "",
        nickname: "",
        department: "",
        password: "",
        roleId: "",
        isValid: ""
      };
      that.$emit("accountEdit", {});
    },
    editSure() {
      let that = this;
      if (!that.editInfo.nickname) {
        that.showMsg("请输入姓名", "error");
        return;
      }
      if (!that.editInfo.loginName && that.flag == 1) {
        that.showMsg("请输入用户名", "error");
        return;
      }
      if (!that.editInfo.password && that.flag == 1) {
        that.showMsg("请输入密码", "error");
        return;
      } else {
      }
      if (!that.editInfo.department) {
        that.showMsg("请输入部门", "error");
        return;
      }
      if (!that.editInfo.roleId) {
        that.showMsg("请选择权限角色", "error");
        return;
      }
      if (!that.editInfo.isValid) {
        that.showMsg("请选择状态", "error");
        return;
      }
      if (that.flag == 1) {
        that.ajaxJson({
          url: "/system/account/new",
          data: {
            loginName:that.editInfo.loginName,
            nickname:that.editInfo.nickname,
            department:that.editInfo.department,
            roleId:that.editInfo.roleId,
            isValid:that.editInfo.isValid,
            password:md5(that.editInfo.password)
          },
          success: function(res) {
            if (res.code == "0") {
              that.showMsg("添加成功", "success");
              that.editCancel();
            } else {
              that.showMsg(res.message, "error");
            }
          }
        });
      } else if (that.flag == 2) {
        that.ajaxJson({
          url: "/system/account/edit",
          data: {
            id:that.editInfo.id,
            nickname:that.editInfo.nickname,
            department:that.editInfo.department,
            roleId:that.editInfo.roleId,
            isValid:that.editInfo.isValid
          },
          success: function(res) {
            if (res.code == "0") {
              that.$message({
                type: "success",
                message: "修改成功！"
              });
              that.editCancel();
            } else {
              that.showMsg(res.message, "error");
            }
          }
        });
      }
    },
    getRoleList(){
      let that = this;
      that.ajaxJson({
        url:'/system/role/list',
        data:{
          page:1,
          size:20
        },
        success:function(res){
          if(res.code=='0'){
            let roleOptions = res.data.list ? res.data.list : []
            roleOptions.forEach(function(item,index){
              that.roleOptions.push({
                value:item.id,
                label:item.name
              })
            });
          }
        }
      })
    }
  },
  created() {
    let that = this;
    that.getRoleList()
    if (that.message) {
      that.editInfo = that.message;
    }
  }
};
</script>
<style lang="less">
.accountEdit {
  .dialog-body {
    width: 100%;
    .body-message {
      width: 100%;
      overflow: hidden;
      li {
        width: 33.3%;
        float: left;
        line-height: 30px;
        .span1 {
          color: #999;
        }
        .span2 {
          color: #000;
        }
      }
    }
    .body-operation {
      margin-top: 20px;
      li {
        display: flex;
        line-height: 40px;
        margin-bottom: 10px;
        .span1 {
          width: 120px;
          flex: none;
          color: #999;
          text-align: right;
        }
        .span2 {
          flex: 1;
          margin-left: 20px;
          .el-input {
            width: 30% !important;
          }
          .inputWidth {
            width: 120px;
          }
          .el-select {
            .el-input {
              width: 100% !important;
            }
          }
          .el-input__inner {
            width: 100%;
            height: 36px;
            padding: 0 5px;
          }
          .el-checkbox__inner {
          }
        }
      }
    }
  }
}
</style>
